<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Agregar Usuario</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        {% load staticfiles %}
        <link rel="stylesheet" href="{% static "css/spacelab.css" %}">
        {% load staticfiles %}
        <link rel="stylesheet" href="{% static "css/responsive.css" %}">
        {% load staticfiles %}
        <link rel="stylesheet" href="{% static "css/misestilos.css" %}">
        {% load staticfiles %}
        <link rel="stylesheet" href="{% static "css/misestilos2.css" %}">
        {% load staticfiles %}
        <link rel="stylesheet" href="{% static "css/menu_jquery.css" %}">

        <!-- JS files -->
        {% load staticfiles %} <script type="text/javascript" src="{% static "js/jquery.js" %}"></script>
        {% load staticfiles %} <script type="text/javascript" src="{% static "js/bootstrap.js" %}"></script>
        {% load staticfiles %} <script type="text/javascript" src="{% static "js/menu_jquery.js" %}"></script>

    </head>
    <body>

        {% include "topmenu.html" %} <!-- Top menu -->

        <div class="container">
            <div class="row-fluid">
                {% include "sidebar.html" %} <!-- Side bar -->

                <div class="span9">

                    {% if show_message_success %}
                    <div class="alert alert-success">
                        <button type="button" class="close" data-dismiss="alert">
                            &times;
                        </button>
                        {{mensaje_exito|safe}}

                    </div>
                    {% endif %}
                    {% if show_message_error %}
                    <div class="alert alert-error">
                        <button type="button" class="close" data-dismiss="alert">
                            &times;
                        </button>
                        {{mensaje_error|safe}}
                    </div>
                    {% endif %}

                    <!-- Formulario para agregar user -->
                    <div class="page-header">
                        <h1>Agregar User</h1>
                    </div>
                    <small><b>Campos con (*) son de caracter obligatorio para el registro.</b></small>

                    <form action="/plataforma/universidades/agregar_user/" id="userForm" method="post">
                        <div class="form-horizontal well">
                            <div class="control-group">
                                <label for="nombrePropio" class="control-label"><b>Nombre Propio</b></label>
                                <div class="controls">
                                    <input type="text" name="nombrePropio" id = "nombrePropio" class="textarea_agregar_user">
                                </div>
                            </div>
                            <!-- Nombre Propio -->

                            <div class="control-group">
                                <label for="apellidos" class="control-label"><b>Apellidos</b></label>
                                <div class="controls">
                                    <input type="text" name="apellidos" id = "apellidos" class="textarea_agregar_user">
                                </div>
                            </div>
                            <!-- Apellidos -->

                            <div class="control-group">
                                <label for="correo" class="control-label"><b>Dirección de correo electrónico*</b></label>
                                <div class="controls">
                                    <input type="email" name="correo" id = "correo" class="textarea_agregar_user" placeholder="ejemplo@ejemplo.com" onBlur="javascript:ajax_message_email(event)">
                                    <span class="help-block"><small>(El correo eletrónico se convierte en el username del user)</small></span>
<!--                                 <div class="correoAlert"></div>
 -->                                <div class="result_email"></div>
                                </div>  
                            </div>
                            <!--Correo -->

                            <div class="control-group">
                                <label for="pass" class="control-label"><b>Contraseña*</b></label>
                                <div class="controls">
                                    <input type="password" name="pass" id = "pass" class="textarea_agregar_user"onBlur="javascript:compPass(event)">
                                <div class="passAlert"></div>
                                </div>
                            </div>
                            <!-- Password -->

                            <div class="control-group">
                                <label for="confirm" class="control-label"><b>Confirmar Contraseña*</b></label>
                                <div class="controls">
                                    <input type="password" name="confirm" id = "confirm" class="textarea_agregar_user" onBlur="javascript:compPass(event)" >
                                    <div class="confirmAlert"></div>
                                    <div class="content"></div>
                                </div>
                            </div>
                            <!-- Confirmacion Password-->
                        </div>

                        

                        <h3>Permisos:</h3>
                        <div class="form-horizontal well">
                            <div class="control-group">
                                <label for="activo" class="checkbox">
                                    <input type="checkbox" name="activo" id = "activo" >
                                    <b>Es activo (bloqueado/desbloqueado)</b> <span class="help-block"><small>Indica si el user tiene la posibilidad de iniciar sesión en el sistema.</small></span> </label>
                                <hr>

                                <label for="staff" class="checkbox">
                                    <input type="checkbox" name="staff" id = "staff" >
                                    <b>Es staff</b> <span class="help-block"><small>Indica si el user puede entrar en este sitio de administración.</small></span> </label>
                                <hr>

                                <label for="superuser" class="checkbox">
                                    <input type="checkbox" name="superuser" id = "superuser" >
                                    <b>Es superusuario</b> <span class="help-block"><small>Indica que este user tiene todos los permisos sin asignárselos explícitamente.</small></span> </label>
                            </div>
                            <!-- Permisos -->
                        </div>

                        {% csrf_token %}

                        <h3>Usuario:</h3>
                        <div class="form-horizontal well">
                            <label for="region" class="control-label" id="labelUniversidad"><b>Universidad* </b></label>
                            <div class="controls">
                                <select name="universidad"  id = "universidad" class="selectarea_crear_univ">
                                    <option value="">| Elije una Universidad |</option>
                                    {% for universidad in universidades %}
                                    <option value="{{ universidad.id }}">{{ universidad.nombre }}</option>
                                    {% endfor %}
                                </select>
                                <button class="btn btn-primary" type="button" id = "form_user_univ">
                                    Crear Univ. &raquo
                                </button>
                            </div>
                            <!-- Seleccion universidad para el usuario -->

                            <hr>

                            <div class="contentUniv"></div>
                            <!-- Mensajes referente a la universidad -->

                            <div class="formUniv" style="display:none">
                                <!-- Formulario Registro Universidad  para el usuario-->
                                <div class="control-group">
                                    <!-- Nombre -->
                                    <label for="nombre" class="control-label"><b>Nombre* </b></label>
                                    <div class="controls">
                                        <input type="text" name="nombreUniv" id = "nombreUniv" class="textarea_crear_univ">
                                    <div class="nombreUnivAlert"></div>
                                    </div>
                                </div>
                                <!-- /Nombre -->

                                <div class="control-group">
                                    <!-- Telefono -->
                                    <label for="telefono" class="control-label"><b>Teléfono </b></label>
                                    <div class="controls">
                                        <input type="text" name="cod_pais" id = "cod_pais" class="textarea_crear_univ_tel" value="{{cod_pais}}" placeholder="Cod.País">
                                        <input type="text" name="cod_ciudad" id = "cod_ciudad" class="textarea_crear_univ_tel" value="{{cod_ciudad}}" placeholder="Cod. Área">
                                        <input type="text" name="telefono" id = "telefono" class="textarea_crear_univ" value="{{telefono}}" placeholder="Num. Tel.">
                                    </div>
                                </div>
                                <!-- /Telefono -->

                                <div class="control-group">
                                    <!-- Url -->
                                    <label for="url" class="control-label"><b>Url*</b></label>
                                    <div class="controls">
                                        <input type="text" name="url" id = "url" class="textarea_crear_univ" placeholder="www.ejemplo.com" onBlur="javascript:ajax_message_url(event)">
                                    <div class="result_url"></div>
                                    </div>
                                </div>
                                <!-- /Url -->

                                

                                <div class="control-group">
                                    <!-- Siglas -->
                                    <label for="siglas" class="control-label"><b>Siglas</b></label>
                                    <div class="controls">
                                        <input type="text" name="siglas" id = "siglas" class="textarea_crear_univ">
                                    </div>
                                </div>
                                <!-- /siglas -->

                                <div class="control-group">
                                    <!-- Direccion -->
                                    <label for="direccion" class="control-label"><b>Direccion</b></label>
                                    <div class="controls">
                                        <input type="text" name="direccion" id = "direccion" class="textarea_crear_univ">
                                    </div>
                                </div>
                                <!-- /Direccion -->

                                <div class="control-group">
                                    <label for="administrador" class="control-label"><b>Administrador</b></label>
                                    <div class="controls">
                                        <select name="administrador" id = "administrador" class="selectarea_crear_univ">
                                            <option value="">| Elije un Administrador para la universidad. |</option>
                                            {% for id_user, nombre_user in usuarios %}
                                            <option value="{{id_user}}">{{nombre_user}}</option>
                                            {%endfor%}
                                        </select>

                                        <div class="contentAdmin"></div>

                                        <label for="checkAdmin" class="checkbox">
                                            <input type="checkbox" name="checkAdmin" id = "checkAdmin" >
                                            <small><span for="checkAdmin" class="help-block" id = "administradorUserCheck" ></span></small> </label>
                                    </div>
                                </div>
                                <!-- Administrador -->

                                <div class="control-group">
                                    <!-- Pais -->
                                    <label for="pais" class="control-label"><b>Pais*</b></label>
                                    <div class="controls">
                                        <select name="pais"  id = "pais" class="selectarea_crear_univ">
                                            <option value="">| Elije un pais |</option>
                                            {% for nombre, codigo in lista_sinc_paises %}
                                            <option value="{{ nombre }}">{{ codigo }}</option>
                                            {% endfor %}
                                        </select>
                                    <div class="paisAlert"></div>
                                    </div>
                                </div>
                                <!-- /Pais -->
                            </div>
                        </div>
                        <!--/Usuario -->

                        <!-- <div class="control-group">
                            <div class="controls">
                                <input type="hidden" name="opciones" id = "opciones" >
                            </div>
                        </div>
                        opciones  -->

                        <div class="controls">
                            <div>
                                <input type="hidden" name="banderaFormularioUniversidad" id = "banderaFormularioUniversidad" value= 0 required>
                            </div>
                        </div>
                        <!-- Bandera indica si se activo o no Crear Universidad-->

                        <div class="controls">
                            <div>
                                <input type="hidden" name="banderaAdministradorUserCheck" id = "banderaAdministradorUserCheck" value= 0 required>
                            </div>
                        </div>
                        <!-- Bandera indica si se activo o no Crear Universidad-->

                        <div class="form-horizontal well" align="center">
                            <button type="submit" class="btn btn-primary" onClick="javascript:myfunc(event)">
                                Guardar
                            </button>
                        </div>
                        <!-- Guardar -->
                    </form>
                </div>
            </div>
            <!-- /row -->

            {% include "footer.html" %} <!-- Footer -->
        </div>
        <!-- /container -->

        <script>
            //************************
            function ajax_message_email() {
                $(".result_email").html("");
                email = $("#correo").val()
                if ((email != "") && validateEmailFormat(email)) {
                    $.ajax({
                        type : "POST",
                        url : "/plataforma/universidades/ajax_message_email/",
                        data : {
                            'email' : email
                        },
                        cache : false,
                        success : function(returndata) {
                            if (returndata.tipo == "error")
                                $(".result_email").html("<div class='alert alert-error'>" + returndata.message + "</div>");
                            else if (returndata.tipo == "exito")
                                $(".result_email").html("<div class='alert alert-success'>" + returndata.message + "</div>");

                        }
                    });
                } else {
                    $(".result_email").html("<div class='alert alert-error'>Ingrese correctamente un email.</div>");
                }
            }

            //************************
            function ajax_message_url() {
                $(".result_url").html("");
                url = $("#url").val()
                if ((url != "") && validateUrlFormat(url)) {
                    $.ajax({
                        type : "POST",
                        url : "/plataforma/universidades/ajax_message_url/",
                        data : {
                            'url' : url
                        },
                        cache : false,
                        success : function(returndata) {
                            if (returndata.tipo == "error")
                                $(".result_url").html("<div class='alert alert-error'>" + returndata.message + "</div>");
                            else if (returndata.tipo == "exito")
                                $(".result_url").html("<div class='alert alert-success'>" + returndata.message + "</div>");
                        }
                    });
                } else if(!validateUrlFormat(url)){
                    $(".result_url").html("<div class='alert alert-error'>Ingrese una url válida para la universidad.</div>");
                }
            }

            //*************************
            function validateEmailFormat(email) {
                var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                return re.test(email);
            }

            //*************************
            function validateUrlFormat(url) {
                var re = /^((http:\/\/www\.|https:\/\/www\.|www\.)[a-zA-Z0-9\-]+(?:\.[a-zA-Z0-9\-]+)*\.[a-zA-Z]{2,6}(?:\/?|(?:\/[\w\-]+)*)(?:\/?|\/\w+\.[a-zA-Z]{2,4}(?:\?[\w]+\=[\w\-]+)?)?(?:\&[\w]+\=[\w\-]+)*)$/;
                return re.test(url);
            }

            //************************
            function compPass(event) {
                if ($("#confirm").val() != $("#pass").val()) {
                    $(".content").html("<div class='alert alert-error'>Verifique password y la confirmacion, no coinciden.</div>");
                    return false;
                } else {
                    $(".content").html("<div class='alert alert-success'>La Contraseña es válida.</div>");
                }

            }

            //************************
            function myfunc(event) {
                if (($("#banderaFormularioUniversidad").val() == 0) && ($("#universidad").val() == "")) {//si no se activo el formulario para crear universidad, y no se seleccionó una universidad
                    event.preventDefault();
                    $(".contentUniv").html("<div class='alert alert-error'>Seleccione una universidad para asociar con el usuario. Si no existe, debe crearlo.</div>");
                }

                if (($("#banderaFormularioUniversidad").val() == 1) && ($("#banderaAdministradorUserCheck").val() == 0) && ($("#administrador").val() == "")) {//si se selecciono el form para crear universidad, pero no se selecciono un admin de la lista ni se chequeo para poner al user actual como admin
                    event.preventDefault();
                    $(".contentAdmin").html("<div class='alert alert-error'>Seleccione un administrador para la universidad. Si no existe, debe crearlo, o bien, asignar al usuario en creación como administrador de la universidad.</div>");
                }

                //Control de los campos required
                if ($("#correo").val() == "") {
                    $(".result_email").html("<div class='alert alert-error'>Ingrese correctamente un email.</div>");
                    event.preventDefault();
                }
                if ($("#pass").val() == "") {
                    $(".passAlert").html("<div class='alert alert-error'>Ingrese la Contraseña.</div>");
                    event.preventDefault();
                }
                if ($("#confirm").val() == "") {
                    $(".confirmAlert").html("<div class='alert alert-error'>Confirme la Contraseña correctamente.</div>");
                    event.preventDefault();
                }
                if ($("#banderaFormularioUniversidad").val() == 1) {//Si esta activado el formulario para Crear Universidad
                    if ($("#nombreUniv").val() == "") {
                        $(".nombreUnivAlert").html("<div class='alert alert-error'>Ingrese nombre para la universidad.</div>");
                        event.preventDefault();
                    }
                    if ($("#url").val() == "") {
                        $(".result_url").html("<div class='alert alert-error'>Ingrese correctamente una dirección web.</div>");
                        event.preventDefault();
                    }
                     if ($("#pais").val() == "") {
                        $(".paisAlert").html("<div class='alert alert-error'>Debe seleccionar un país. Si no existe, debe crearlo primero.</div>");
                        event.preventDefault();
                    }
                }

            }

            //************************

            //Se vacian los div con los mensajes
            // $("#correo").blur(function() {
            //     if ($("#correo").val() != "") {
            //         $(".correoAlert").html("");
            //     }
            // });
            $("#pass").blur(function() {
                if ($("#pass").val() != "") {
                    $(".passAlert").html("");
                }
            });
            $("#confirm").blur(function() {
                if ($("#confirm").val() != "") {
                    $(".confirmAlert").html("");
                }
            });
            $("#nombreUniv").blur(function() {
                if ($("#nombreUniv").val() != "") {
                    $(".nombreUnivAlert").html("");
                }
            });
            /*$("#url").blur(function() {
                if ($("#url").val() != "") {
                    $(".result_url").html("");
                }
            });*/

            $("#universidad").blur(function() {
                if ($("#universidad").val() != "")
                    $(".contentUniv").html("");
            });

            $("#pais").blur(function() {
                if ($("#pais").val() != "")
                    $(".paisAlert").html("");
            });

            //************************
            //Manejo del formulario de registro de universidad
            $("#form_user_univ").click(function() {
                $(".contentUniv").html("");
                $(".nombreUnivAlert").html("");
                $(".result_url").html("");
                $(".contentAdmin").html("");
                $("#administradorUserCheck").html("Poner como administrador de la universidad al <username/email> " + $("#correo").val());
                if ($("#universidad").css("display") == "none") {
                    $("#universidad").css("display", "inline-block");
                    $("#form_user_univ").text("Crear Univ.");
                } else {
                    $("#universidad").css("display", "none");
                    $("#form_user_univ").text("Seleccionar Universidad existente");
                }
                if ($("#labelUniversidad").css("display") == "none") {
                    $("#labelUniversidad").css("display", "inline-block");
                } else {
                    $("#labelUniversidad").css("display", "none");
                }
                if ($("#banderaFormularioUniversidad").val() == 0) {
                    $("#banderaFormularioUniversidad").val(1);
                } else {
                    $("#banderaFormularioUniversidad").val(0);
                }
                $(".formUniv").slideToggle();

            });

            $("#checkAdmin").click(function() {
                $(".contentAdmin").html("");
                if ($("#administrador").prop("disabled")) {
                    $("#administrador").attr("disabled", false);
                } else {
                    $("#administrador").attr("disabled", true);
                }

                if ($("#banderaAdministradorUserCheck").val() == 0) {
                    $("#banderaAdministradorUserCheck").val(1);
                } else {
                    $("#banderaAdministradorUserCheck").val(0);
                }
            });
            $("#administrador").click(function() {
                if ($("#administrador").val() != "")
                    $(".contentAdmin").html("");
            });

        </script>
    </body>
</html>